<template>
  <div class="main">
    <div class="content">
      <div class="box">
        <div class="title">注册</div>
        <div class="msg">
          <el-form :model="form" label-width="80px">
            <el-form-item label="手机号">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="验证码">
              <el-input placeholder="验证码">
                <template #append>
                  <span @click="captchaClick">短信验证码</span>
                </template>
              </el-input>
            </el-form-item>
           

            <el-form-item label="密码">
              <el-input :value="userInfo.$state.id" />
            </el-form-item>

            <el-form-item label="重复密码">
              <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="超级密码">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-form>
        </div>

        <div class="btn">
            <el-button type="primary">注   册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { test } from '@/api/test'

import { useUserInfo } from '@/stores/user'
const userInfo = useUserInfo()
userInfo.setState({id: 22222})

const captchaClick = () => {
    captchaObj.value.showCaptcha(); //显示验证码
}
const form = reactive({
  name: "",
});
test().then(res => {
    console.log(res)
})
ElMessage({
    message: 'ssss',
    type: 'error',
})
const captchaObj = ref()
initGeetest4({
    captchaId: 'bcb3fcc2b4740b804fa45723bedea3a5',
    product: 'bind'
},function (captcha) {
    // captcha为验证码实例
    captcha.appendTo("#captcha");
    captcha.onReady(function(){
      //your code
    }).onSuccess(function(){
      //your code
    }).onError(function(){
      //your code
    })
    captchaObj.value = captcha
});

</script>
<style scoped>
.main {
  height: 100%;
  background-image: url(http://site.cswwebs.com/images/register.jpeg);
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content {
  flex-grow: 1;
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .box {
  width: 400px;
  height: 420px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}
.content .title {
  font-size: 40px;
  font-weight: 400;
}
.content .msg {
  padding: 20px;
}
.content .btn{
    display: flex;
  align-items: center;
  justify-content: center;
}
</style>
